本文已搬家到筆者自己的部落格嘍，有興趣的可以點這個連結～

前言

在正式進入 非同步 文章之前，先來簡單介紹一下 非同步 與 同步 的差異，並且用幾個 非同步 會用到的應用來闡述一下 非同步 為什麼在網頁中是必要的。

同步(synchronous) vs 非同步(asynchronous)

在我們剛開始學的程式都是屬於 同步 ，而 同步 的程式碼就是一行一行執行下去非常直觀，而 非同步 就跟 同步 相反， 非同步 的程式碼不用等待自己執行完畢就可以先執行下一行程式碼。

其實 非同步 與 同步 的概念非常容易理解，這邊筆者用個情境劇來形容 非同步 與 同步 。

中午到了，小明要準備出門買雞腿便當配珍奶，假如今天小明走的是同步路線的話會長這樣：

小明到了便當店點了雞腿便當，等到雞腿便當拿到之後再到飲料店點珍奶。

如果是非同步路線會長這樣：

小明到了便當店點了雞腿便當，在等待的過程中先到飲料店點珍奶，之後再看哪邊先做完就先去拿已經做完的餐點。

從上面的例子應該很容易可以看出 同步 與 非同步 的差異吧XD

那網頁為什麼需要非同步呢？

其實很簡單，像筆者在遇到一直轉圈圈等待資料的網頁是絕對不會去瀏覽的，因為 同步 的關係讓網頁處於一直在等待資料的狀態，假如今天是走 非同步 的話就可以設計成先回傳回來的資料先顯示後續的資料再慢慢顯示出來就好，這樣就不會讓網頁一直處於塞車的狀態，進而提升效能。

JS非同步應用

回到正題，JS有哪些應用是走 非同步 呢？這邊筆者列出幾個最常用到的 非同步應用 。

• setTimeout()

  設定一段時間後執行 setTimeout 內的 function ，其概念有點類似工作排程的概念。

  

• setInterval()

  設定一段時間後會重複執行 setInterval() 內的 function 。

  

  溫馨小提醒： setTimeout() 以及 setInterval() 的時間其單位都是毫秒，一秒等於一千毫秒，所以在時間上面的計算要小心不要算錯了喔！

• AJAX

  在前面的文章有稍微提到了 AJAX 的基本觀念，既然 AJAX 主要是用來進行前後端溝通想當然一定也是屬於一種 非同步 ，通常 AJAX 都會結合上面提到的 http method 來進行前後端的資料傳輸。

瀏覽器如何管理同步與非同步程式碼

前面講了很多非同步的應用，這時候你可能會有一個疑問， 非同步 程式碼自己會先執行，那網頁要如何知道什麼時候這個 非同步 的動作已經完成了呢？

其實 非同步 的程式碼會被擺在一個叫做 event queue(事件佇列) 的地方。

在 JavaScript engine 裡面主要可以分為 execution context(執行環境) 以及 event queue 這兩個地方， execution context 就是負責處理 同步 程式碼而 event queue 則是負責處理 非同步 程式碼，在處理的優先順序是 execution context 之後才是 event queue ， event queue 跟 execution context 一樣，只要程式碼執行完畢就會離開該環境，所以這也是瀏覽器如何去判斷 非同步 程式碼已經執行完畢的主要方法喔！
最後這邊用個非常簡單的例子來說明 同步 與 非同步 的執行順序。

callback hell

最後來講講 非同步 最容易遇到的問題吧！

假如今天有一個狀況是要做非常多的 AJAX ，而且每次的 AJAX 都要等上一個 AJAX 做完才能繼續往下執行，其實這種狀況非常容易發生，舉個簡單的例子：今天我要去其他網站撈資料並且把資料存到自己的資料庫，光這個動作就包含了兩次 AJAX 而且兩個動作是有 連貫性 的，這種情況就很容易寫成 AJAX 裡面再包一個 AJAX ，最終就容易形成 callback hell ，就像下圖這樣。

所以大家在寫任何 AJAX 的時候要盡量避免發生這種情況，那如果很不幸真的會寫成 callback hell 怎麼辦？

別擔心，筆者在兩天後的文章會來介紹一種處理 非同步 的方法，可以完美的解決 callback hell 的問題，敬請期待吧XD

總結

從今天開始的文章就屬於 JavaScript 的進階操作了，相較於前幾天的文章，最近這幾篇文章會比較不好懂一些，如果讀者有任何問題都歡迎在下面留言給我，筆者會一一解答。

今天的文章單純介紹一些 同步 與 非同步 的基本觀念，從明天開始的文章就會正式進入 非同步實作 了，讀者不妨可以先好好的把 非同步應用 看懂，到了明天的實作篇才能更容易理解喔！